<template>
  <div class="bg-white rounded-2xl shadow-2xl p-8 text-center">
    <!-- 用户头像 -->
    <div class="mb-6">
      <div class="w-24 h-24 mx-auto bg-gradient-to-br from-bsy to-bsr rounded-full flex items-center justify-center text-white text-3xl font-bold">
        <!-- {{ user?.username?.charAt(0).toUpperCase() || 'U' }} -->
      </div>
    </div>
    <!-- 用户信息 -->
    <h3 class="text-2xl font-bold text-gray-800 mb-2">
      <!-- {{ user?.username }} -->
    </h3>
    <!-- <p class="text-gray-600 mb-6">{{ user?.email }}</p> -->

    <!-- 用户状态 -->
    <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
      <div class="flex items-center justify-center text-green-700">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        已登录
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="space-y-3">
      <button 
        @click="handleLogout"
        class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors"
      >
        退出登录
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
const { logout, user } = useAuth()

// 处理登出
const handleLogout = () => {
  logout()
}
</script>

<style scoped>
/* 成功状态动画 */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.w-24 {
  animation: scaleIn 0.3s ease-out;
}
</style>
